import React from 'react';
import type { StoryObj } from '@storybook/react';
import Modal from './Modal';
import { IModalProps } from './Modal.types';
import Title from './Title';
import Content from './Content';
import Actions from './Actions';

const metaModal = {
    title: 'Modal',
    component: Modal
};

type Story = StoryObj<typeof metaModal>;

export const SmallModal: Story = {
    args: {
        dimension: 'sm',
        showModal: true
    },
    render: (args: IModalProps) =>
    (
        <Modal {...args}>
            <Title>Title</Title>
            <Content>Text</Content>
            <Actions><button type="button">Ok</button></Actions>
        </Modal>
    )
}

export const LargeModal: Story = {
    args: {
        dimension: 'lg',
        showModal: true
    },
    render: (args: IModalProps) =>
    (
        <Modal {...args}>
            <Title>Title</Title>
            <Content>Text</Content>
            <Actions><button type="button">Ok</button></Actions>
        </Modal>
    )
}

export const DefaultModal: Story = {
    args: {
        showModal: true
    },
    render: (args: IModalProps) =>
    (
        <Modal {...args}>
            <Title>Title</Title>
            <Content>Text</Content>
            <Actions><button type="button">Ok</button></Actions>
        </Modal>
    )
}


export default metaModal;
